<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>GestClinic</title>
<link rel="stylesheet" type="text/css" href="tabs.css" />
<script type="text/javascript" src="../../resources/js/jquery-1.8.0.min.js"></script>

<script type="text/javascript">

	$(document).ready(function() {
		$(".tab_content").hide();
		$(".tab_content:first").show(); 
	
		$("ul.tabs li").click(function() {
			
			var nombreTab = $(this).text();
			alert(nombreTab);
			if ($.trim(nombreTab) == 'Usuarios') {
				//alert('${contextPath}: ' + ${contextPath});
				var url = "../../actions/user/ListadoUsuarios.action";    
				$(location).attr('href',url);
			}
			
			$("ul.tabs li").removeClass("active");
			$(this).addClass("active");
			$(".tab_content").hide();
			var activeTab = $(this).attr("rel"); 
			$("#"+activeTab).fadeIn();
		});
	});
</script> 

<style type="text/css">

	ul.tabs {
		margin: 0;
		padding: 0;
		float: left;
		list-style: none;
		height: 32px;
		border-bottom: 1px solid #999999;
		border-left: 1px solid #999999;
		width: 100%;
		font-family: CurlzMTRegular, Helvetica, Arial, sans-serif;
	}
	ul.tabs li {
		float: left;
		margin: 0;
		cursor: pointer;
		padding: 0px 21px ;
		height: 31px;
		line-height: 31px;
		border: 1px solid #999999;
		border-left: none;
		font-weight: bold;
		background: #EEEEEE;
		overflow: hidden;
		position: relative;
   	  	font-family: CurlzMTRegular, Helvetica, Arial, sans-serif;

	}
	ul.tabs li:hover {
		background: #CCCCCC;
	}	
	ul.tabs li.active{
		background: #FFFFFF;
		border-bottom: 1px solid #FFFFFF;
	}
	.tab_container {
		border: 1px solid #999999;
		border-top: none;
		clear: both;
		float: left; 
		width: 100%;
		background: #FFFFFF;
	}
	.tab_content {
		padding: 20px;
		font-size: 1.2em;
		display: none;
	}
	#container {
		width: 95%;
		margin: 0 auto;	
	}
</style>

</head>

<body>
<div id="container">

  <ul class="tabs"> 
        <li class="active" rel="tab1"> Principal</li>
        <li rel="tab2"> Pacientes</li>
        <li rel="tab3"> Profesionales</li>
        <li rel="tab4"> Agenda</li>
        <li rel="tab5"> Opciones</li>
        <li rel="tab6"> Usuarios</li>       
        <li rel="tab7"> Roles</li>
        <li rel="tab8"> Importar</li>
    </ul>

<div class="tab_container"> 
	 <!-- #tab1 :: Principal -->
     <div id="tab1" class="tab_content"> 
 
         <p><img src="../../resources/img/logo_clinica_principal.png" alt="GestClinic"/><br/>
		 <jsp:include page="../tabs/tabPrincipal/tabPrincipal.jsp" />
         </p>

     </div>
     
     <!-- #tab2 :: Pacientes-->
     <div id="tab2" class="tab_content"> 
       <p><img src="images/mortal combat.jpg"> <br />
      	<strong>
      	Mortal Kombat returns after a lengthy hiatus and puts players
      	back into the Tournament for 2D fighting with gruesome combat.
      	</strong>
       </p>
     </div>
     
     <!-- #tab3 :: Profesionales -->
     <div id="tab3" class="tab_content"> 
       <p><img src="images/halo.jpg"> <br />
      	<strong>
      	Halo: Reach is the culmination of the superlative combat, sensational
      	multiplayer, and seamless online integration that are the hallmarks
      	of this superb series.
      	</strong>
       </p>
     </div>
     
     <!-- #tab4 :: Agenda --> 
     <div id="tab4" class="tab_content"> 
       <p><img src="images/portal.jpg"> <br />
      	<strong>
      	Portal 2 is an action shooter game from Valve Software that draws 
      	from the original formula of innovative gameplay, story, and music,
      	which earned the original Portal more than 70 industry accolades.
      	</strong>
       </p>
     </div>
     
     <!-- #tab5 :: Opciones -->
     <div id="tab5" class="tab_content"> 
       <p><img src="images/portal.jpg"> <br />
      	<strong>
      	Portal 2 is an action shooter game from Valve Software that draws 
      	from the original formula of innovative gameplay, story, and music,
      	which earned the original Portal more than 70 industry accolades.
      	</strong>
       </p>
     </div>
     
     <!-- #tab6 :: Usuarios -->      
     <div id="tab6" class="tab_content"> 
         <p>
		 <jsp:include page="../tabs/tabUsuarios/tabUsuarios.jsp" />
         </p>
     </div>

	 <!-- #tab7 :: Roles -->     
     <div id="tab7" class="tab_content"> 
       <p><img src="images/portal.jpg"> <br />
      	<strong>
      	Portal 2 is an action shooter game from Valve Software that draws 
      	from the original formula of innovative gameplay, story, and music,
      	which earned the original Portal more than 70 industry accolades.
      	</strong>
       </p>
     </div>
     
     <!-- #tab8 :: Importar -->
     <div id="tab8" class="tab_content"> 
       <p><img src="images/portal.jpg"> <br />
      	<strong>
      	Portal 2 is an action shooter game from Valve Software that draws 
      	from the original formula of innovative gameplay, story, and music,
      	which earned the original Portal more than 70 industry accolades.
      	</strong>
       </p>
     </div>
                       
 </div> <!-- .tab_container --> 

</div> <!-- #container -->
</body>
</html>